<template>
  <el-select
    :loading="isFirstLoad"
    v-model="accountInfo"
    filterable
    :placeholder="$t('common.placeholderSelect')"
    @change="handleChange"
    @visible-change="visibleChange"
    clearable
  >
    <el-option v-for="item in options" :key="item.id" :label="item.accountInfo" :value="item.id"></el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      accountInfo: '',
      timeout: null,
      options: [],
      page: 1,
      loading: false,
      isFirstLoad: true
    }
  },
  props: ['userId', 'type'],
  watch: {
    userId(newVal, oldVal) {
      if (newVal != '') {
        this.page = 1
        this.options = []
        this.getAccounts()
      } else if (newVal == '') {
        this.accountInfo = ''
      }
    }
  },
  mounted() {
  },
  methods: {
    visibleChange(v) {
      if (v && this.options.length == 0) {
        this.page = 1
        this.options = []
        this.getAccounts()
      }
    },
    getAccounts() {
      if (!this.loading) {
        if (this.type == 'SUPPLIER') {
          this.loading = true
          api('admin/account/getAccounts', {
            page: this.page,
            rows: 10,
            userId: this.userId,
            type: this.type
          })
            .then(r => {
              this.accountInfo = r.data.accountInfo
              this.loading = false
              this.isFirstLoad = false
              if (r.data.length > 0) {
                this.page++
                this.options = [...this.options, ...r.data]
              } else if (this.page == 1) {
                this.options = []
              }
            })
            .catch(e => {
              this.loading = false
              this.isFirstLoad = false
            })
        } else if (this.type == 'CUSTOMER') {
          this.loading = true
          api('admin/account/getAccounts', {
            page: this.page,
            rows: 10,
            userId: this.userId,
            type: this.type
          })
            .then(r => {
              this.accountInfo = r.data.accountInfo
              this.loading = false
              this.isFirstLoad = false
              if (r.data.length > 0) {
                this.page++
                this.options = [...this.options, ...r.data]
              } else if (this.page == 1) {
                this.options = []
              }
            })
            .catch(e => {
              this.loading = false
              this.isFirstLoad = false
            })
        } else if (this.type == 'ADMIN') {
          this.loading = true
          api('admin/account/getAccounts', {
            page: this.page,
            rows: 10,
            // userId: this.userId,
            type: this.type
          })
            .then(r => {
              this.accountInfo = r.data.accountInfo
              this.loading = false
              this.isFirstLoad = false
              if (r.data.length > 0) {
                this.page++
                this.options = [...this.options, ...r.data]
              } else if (this.page == 1) {
                this.options = []
              }
            })
            .catch(e => {
              this.loading = false
              this.isFirstLoad = false
            })
        }
      }
    },
    handleChange(item) {
      this.$emit('input', item)
      this.$emit('change', this.options.filter(o => o.id == item))
    }
  }
}
</script>
